<template>
	<view class="search-page">
		<!-- 头部搜索栏 -->
		<view class="header">
			<view class="header-search">
				<icon type="search" size="13"></icon>
				<input type="text" class="search-title" v-model="query.keyword" />
			</view>
			<view class="search-btn" @click="search">搜索</view>
		</view>
		<!-- tab标签栏 -->
		<van-tabs type="card" color="#1baeae" @click="switchTab">
			<van-tab title="推荐" name=""></van-tab>
			<van-tab title="新品" name="new"></van-tab>
			<van-tab title="价格" name="price"></van-tab>
		</van-tabs>
		<!-- 内容列表 -->
		<view class="content">
			<scroll-view class="product-list" scroll-y refresher-enabled @scrolltolower="loadMore" @refresherrefresh="refresh" :refresher-triggered="isRefresh">
				<!-- 商品内容 -->
				<view v-if="list.length || isRefresh" class="product-item" v-for="item in list" :key="item.goodsId" @click="goGoods(item.goodsId)">
					<!-- 左侧内容 -->
					<image :src="item.goodsCoverImg"></image>
					<!-- 中间内容 -->
					<view class="product-info">
						<view class="name">{{ item.goodsName }}</view>
						<view class="subtitle">{{ item.goodsIntro }}</view>
						<text class="price">￥ {{ item.sellingPrice }}</text>
					</view>
				</view>
				<template v-else>
					<!-- 历史记录 -->
					<view class="history-view" v-if="historyList.length" >
						<view class="history-title">
							<text>历史记录</text>
							<van-icon name="delete-o" @click="clearHistory" />
						</view>
						<view class="history-list">
							<view v-for="item, i in historyList" :key="i" @click="historySearch(item)">
								<van-tag size="large" type="warning" >{{ item }}</van-tag>
							</view>
						</view>
					</view>
					<!-- 空状态 -->
					<view class="search-tip">
						<image class="empty" src="https://s.yezgea02.com/1604041313083/kesrtd.png" alt="搜索"></image>
						<view class="finished-text">搜索想要的商品</view>
					</view>
				</template>
				
				<!-- 加载提示 -->
				<view class="loading-tip" v-if="list.length">{{  hasMore ? '加载中...' : '没有更多了'  }}</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
// 1. 关键词搜索【点击/关键词不为空】  2.  分类ID搜索 【分类页传值】  3. 排序搜索   4.  历史搜索  5.  下拉刷新 / 上拉加载

// vue3小程序生命周期函数
import { onShareAppMessage, onLoad, onShow, onHide } from '@dcloudio/uni-app'
import { reactive, toRefs, watch, watchEffect } from 'vue'
import { searchApi } from '../../api/modules/goods'

const state = reactive({
	query: { keyword: '', goodsCategoryId: '', orderBy: '', page: 1 }, // 搜索条件
	list: [], // 搜索结果
	historyList: uni.getStorageSync('HISTORY') || [], // 搜索历史记录
	isRefresh: false, // 是否刷新中
	hasMore: true,    // 是否能加载
	loading: false    // 是否加载中
})

// 监听history的改变
watch(() => state.historyList, () => {
	uni.setStorageSync('HISTORY', state.historyList)
}, { deep: true })

// * 获取数据
const getData = async () => {
	const { keyword, goodsCategoryId, orderBy, page } = state.query
	// 1. 校验搜索参数有效性【关键词不能为空 / 分类id不能为空 】
	if (!keyword && !goodsCategoryId) {
		state.isRefresh = false
		return
	}
	state.loading = true
	// 2. 发起请求
	// 参数需求: keyword 关键词  goodsCategoryId 分类ID orderBy 排序条件  pageNumber 页码
	const { data } = await searchApi({ keyword, goodsCategoryId, orderBy, pageNumber: page })
	console.log(data)
	// 3. 保存数据
	state.list = state.list.concat(data.list)
	state.isRefresh = false
	state.loading = false
	// 4. 判断是否还有数据
	if (page >= data.totalPage) {
		state.hasMore = false
	}
}

// * 搜索内容
const search = () => {
	// 保存关键词
	addHistory(state.query.keyword)
	refresh()
}

// * 切换tab
const switchTab = (e) => {
	const { title, name } = e.detail
	state.query.orderBy = name || ''
	refresh()
}

// * 下拉刷新(刷新数据 重新加载)
const refresh = () => {
	// 开启下拉状态、清空列表、还原页码
	state.isRefresh = true
	state.hasMore = true
	state.list = []
	state.query.page = 1
	getData()
}

// * 加载更多
const loadMore = () => {
	// 判断是否加载中
	if (state.loading) return
	// 判断是否能加载
	if (!state.hasMore) return
	state.query.page += 1
	getData()
}

// * 添加历史记录
const addHistory = (value) => {
	// 1. 判断是否为空
	if (!value) return
	// 2. 判断记录是否重复
	const index = state.historyList.indexOf(value)
	if (index !== -1) {
		state.historyList.splice(index, 1)
	}
	// 3. 添加新纪录
	state.historyList.unshift(value)
	// 4. 判断是否超过10个
	if (state.historyList.length > 10) {
		state.historyList.pop()
	}
}

// * 历史记录搜索
const historySearch = (value) => {
	console.log(value)
	state.query.keyword = value
	refresh()
}

// * 清除历史记录
const clearHistory = () => {
	state.historyList = []
}

// * 跳转商品详情
const goGoods = (id) => {
	uni.navigateTo({
		url: '/subpkg/goods-detail/goods-detail?goodsId=' + id
	})
}

// 页面加载
onLoad(message => {
	const { cateId = '', cateName } = message
	// 1. 存储分类ID
	state.query.goodsCategoryId = cateId
	// 2. 动态设置标题
	uni.setNavigationBarTitle({ title: cateName ? '搜索-' + cateName : '搜索'  })
	// 3. 搜索内容
	getData()
})

// 页面分享(不定义该函数 页面将无法分享)
onShareAppMessage(() => {})

const { query, list, historyList, isRefresh, hasMore } = toRefs(state)
</script>

<style lang="scss">
.header {
	display: flex;
	justify-content: space-between;
	height: 100rpx;
	line-height: 100rpx;
	padding: 0 30rpx;
	font-size: 30rpx;
	color: #656771;
	.header-search {
		display: flex;
		flex: 1;
		height: 40rpx;
		line-height: 40rpx;
		margin: 20rpx 0;
		padding: 10rpx 0;
		color: #232326;
		background: #f7f7f7;
		border-radius: 40rpx;
		icon {
			padding: 4rpx 18rpx 0 20rpx;
			font-size: 32rpx;
		}
		.search-title {
			font-size: 24rpx;
			color: #666;
			background: #f7f7f7;
			width: 80%;
		}
	}
	.search-btn {
		height: 56rpx;
		margin: 16rpx 0;
		line-height: 56rpx;
		padding: 0 20rpx;
		color: #f7f7f7;
		background-color: $pc;
		border-radius: 10rpx;
		margin-top: 20rpx;
		margin-left: 30rpx;
	}
}

.content {
	height: calc(100vh - 160rpx);
	overflow: hidden;
	// 商品列表
	.product-list {
		height: 100%;
		.product-item {
			width: 100%;
			display: flex;
			justify-content: space-between;
			height: 240rpx;
			padding: 20rpx 0;
			border-bottom: 2rpx solid #dcdcdc;
			image {
				width: 280rpx;
				height: 240rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
			}
			.product-info {
				width: 56%;
				height: 240rpx;
				padding: 10rpx;
				text-align: left;
				box-sizing: border-box;
				.name {
					width: 100%;
					max-height: 80rpx;
					line-height: 40rpx;
					font-size: 30rpx;
					color: #333;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.subtitle {
					width: 100%;
					max-height: 40rpx;
					padding: 20rpx 0;
					line-height: 50rpx;
					font-size: 26rpx;
					color: #999;
					overflow: hidden;
				}
				.price {
					color: $pc;
					font-size: 32rpx;
				}
			}
		}
	}
	
	// 历史记录
	.history-view {
		padding: 24rpx;
		box-sizing: border-box;
		.history-title {
			@include fj();
			padding-bottom: 16rpx;
		}
		.history-list {
			display: flex;
			flex-wrap: wrap;
			.van-tag {
				margin: 6rpx;
			}
		}
	}
	
	// 空状态
	.search-tip {
		padding-top: 40rpx;
		.empty {
			display: block;
			width: 300rpx;
			height: 300rpx;
			margin: 0rpx auto 40rpx;
		}
		.finished-text {
			color: #969799;
			font-size: 28rpx;
			line-height: 28rpx;
			text-align: center;
		}
	}
	
	// 加载提示
	.loading-tip {
		padding: 24rpx 0;
		color: #969799;
		font-size: 28rpx;
		line-height: 28rpx;
		text-align: center;
	}
}
</style>
